<!--  -->
<template>
  <div class="material-img-min">
    <!-- 搜索 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>图片搜索</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-input v-model="serch.title" placeholder="请输入内容" style="width:220px"></el-input>
        </el-col>
        <el-col :span="12" >
          <span text-align="right">
            <el-button type="primary" @click="doSearch" size="small">搜索</el-button>
            <el-button type="primary" plain size="small">重置</el-button>
          </span>
        </el-col>
      </el-row>
    </el-card>
   
    <!-- 图片列表展示 -->
    <el-card class="img-card">
       <el-pagination
      style="text-align:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.start"
      :page-sizes="page.sizes"
      :page-size="page.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalcount"
    ></el-pagination>
      <div slot="header" class="clearfix">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="host+'/admin/xy/upload/uploadImg'"  
          :file-list="fileList"
          :on-success="handleSucc"
          :headers="headers"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
      <el-row>
        <el-col :span="6" v-for="item in imgList" :key="item.id" class="imgbox">
          <el-card class="imgbox-card">
            <el-image :src="host+'/'+item.dir+'/'+item.fileName"></el-image>
            <!-- 获取图片格式需特别注意 -->
            <div class="tool-bar">
              <el-tooltip class="item" effect="dark" content="点击编辑" placement="top">
                <span
                  class="title"
                  v-show="item.id!=editId"
                  :class="{named:!item.title}"
                  @click="goEdit(item.id,$event)"
                >{{item.title?item.title:'未定义'}}</span>
              </el-tooltip>
              <span class="size">{{item.size+'d'}}</span>
              <el-button
                class="del"
                type="text"
                size="mini"
                style="color:red"
                @click="doDel(item.id)"
              >删除</el-button>
            </div>
            <el-input
              class="input"
              @keyup.enter.native="getupdataTitle(item.id,item.title)"
              @keyup.esc.native="cancleSave"
              v-show="item.id==editId"
              v-model="item.title"
              placeholder="输入标题,enter保存,esc取消"
              size="small"
            ></el-input>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
const settingFile = require("@/settings"); //获取定义的公共域名所在的文件夹
import { imgList, imgDel, imgUpdateTitle } from "@/api/material/img";
import {getToken} from '@/utils/myAuth'
export default {
  data() {
    return {
      host: settingFile.host, //获取定义的host
      fileList: [],
      imgList: [],
      serch: {},
      page: {
        start: 1,
        limit: 12,
        sizes: [12, 24, 36],
        totalcount: 0,
      },
      editId: "", //标识哪个被编辑
    };
  },
  created() {
    this.getImgList();
  },
  computed:{
    headers(){
      return{
        "bufan-token":getToken()   //图片请求头
      }
    }
  },
  methods: {
    doSearch() {
      this.getImgList()
    },
    handleSucc(response, file, fileList) {
      this.$refs.upload.clearFiles();//清空已上传的文件列表
      this.getImgList();
    },
    getImgList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.serch,
      };
      imgList(params).then((res) => {
        this.imgList = res.data.list;
        this.page.totalcount = res.data.totalRow;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getImgList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getImgList();
    },
    doDel(id) {
      this.$confirm("确定要删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          imgDel({ id }).then((res) => {
            var index = this.imgList.findIndex((item) => {
              item.id == id;
            });
            this.imgList.splice(index, 1);
            this.getImgList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    goEdit(id, e) {
      this.editId = id; //将点击到图片id赋值给editId,因为input框要通过相同的id来显示出来
      this.$nextTick(() => {
        //当数据被修改后使用这个方法，会回调获取更新后的dom再render出来
        var target = e.target; //获取目标元素
        var inputele = target.parentNode.nextElementSibling.children[0];  //获取class为input的目标元素
        inputele.focus();
        console.log(inputele);
      });
    },
    getupdataTitle(id,title) {
      // 通过dom获取value,这是我们以前一直使用的方式.这里回归原始是为了取消这个input框的双向相应,避免esc取消无法还原
      // var title=e.target.value
      imgUpdateTitle({
        id,
        title,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "更新成功!",
          });
          this.editId = "", 
          this.getImgList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "更新失败",
          });
        });
    },
    cancleSave() {
      this.editId = "";
    },
  },
};
</script>
<style lang='scss' scoped>
.img-card {
  margin: 30px;
  .el-row {
    .imgbox {
      .imgbox-card {
        margin: 8px;
        height: 300px;
        position: relative;
        .el-image {
          width: 90%;
          height: 150px;
          margin-left: 5%;
        }
      }
    }
  }
}
.tool-bar {
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 20px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  .title {
    font-size: 14px;
    color: #333;
    &.named {
      color: #999;
    }
  }
  .size {
    font-size: 12px;
  }
  .del {
    display: inline-block;
    margin-top: -10px;
  }
}
.input {
  position: absolute;
  bottom: 30px;
  left: 20px;
  width: 90%;
  z-index: 5;
}
</style>